<template>
    <view :class="props.type == 'horizontal' ? 'horizontal-good-card-box' : 'vertical-good-card-box'">
        <view class="img-box" :style="{ 'width': props.imgWidth, 'height': props.imgHeight }" @click="hanldeClickGoods">
            <image class="good-img" :src="props.goodsData.image"></image>
            <view class="recommend" v-if="props.goodsData.isRecommend">推荐</view>
            <view class="hot" v-if="props.goodsData.isHot">热门</view>
        </view>
        <view class="good-msg"
            :style="{ 'width': props.type == 'horizontal' ? `calc(100% - 10px - ${props.imgWidth})` : props.imgWidth}">
            <view v-if="props.goodsData.name" :class="props.nameOverflow === 1 ? 'name' : 'name-two'"
                @click="hanldeClickGoods">
                {{ props.goodsData.name }}
            </view>
            <view v-if="props.goodsData.brief" :class="props.briefOverflow === 1 ? 'desc' : 'desc-two'"
                @click="hanldeClickGoods">
                {{ props.goodsData.brief }}
            </view>

            <slot name="goodTag"></slot>

            <slot name="goodPrice">
                <view class="price-msg">
                    <view class="price-box">
                        <view class="price">
                            <text class="symbol">￥</text>
                            <text class="num">{{ props.goodsData.price }}</text>
                        </view>
                        <view class="underlin-price">￥{{ props.goodsData.mktprice }}</view>
                    </view>
                    <view class="btn">
                        立即购买
                    </view>
                </view>
            </slot>
        </view>
    </view>
    <slot name="other"></slot>
</template>
<script setup lang="ts">
    const props = withDefaults(defineProps<{
        type ?: 'vertical' | 'horizontal',
        imgWidth ?: string,
        imgHeight ?: string,
        nameOverflow ?: number,
        briefOverflow ?: number,
        goodsData ?: any,
    }>(), {
        type: 'horizontal',  // vertical 垂直   horizontal 水平
        imgWidth: '190rpx',
        imgHeight: '190rpx',
        nameOverflow: 1,
        briefOverflow: 1,
        goodsData: {},
    });

    const emit = defineEmits(['hanldeClickGoods']);

    const hanldeClickGoods = () => {
        emit('hanldeClickGoods', props.goodsData)
    }
</script>
<style lang="scss" scoped>
    @import './coreshop-goods-card.scss';
</style>